<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="650px"
    append-to-body
  >
    <div class="form-box">
      <!-- <div class="sub-tit font16 bold">保证金：<span>{{money}}</span></div> -->
      <div class="sub-tit font16 bold">保证金应缴金额：<span>{{money}}</span></div>
    
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        :rules="rules"
        label-width="135px"
        class="demo-ruleForm"
      >
       
        <el-form-item label="" prop="num">
          <div class="payway" style="width: 600px;">
            <payWayLsit :showYue="false" :payWay='payWay' ref="payWayLsit" @selectPayway="selectPayway"></payWayLsit>
          </div>
        </el-form-item>

        <div class="tip">
          
        </div>

        <div class="center">
          <el-button
            type="primary"
            @click="submitForm('form')"
            v-loading="loading"
            >确认充值</el-button
          >
        </div>
      </el-form>
      <payQrcode ref="payQrcode"   @checkOrderInterval="checkOrderInterval" @checkOrder="checkOrder"></payQrcode>
    </div>
  </el-dialog>
</template>

<script>
import moneyApi from "@/api/financeCenter/myMoney";
import payApi from "@/api/financeCenter/pay";
import payQrcode from "./PayQrcodeCommon.vue"
import payWayLsit from "../../components/payWayLsit.vue"
export default {
  name: "addjifen",
  components:{payQrcode,payWayLsit},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      title: "缴纳保证金",
      // 表单参数
      form: {
        price: "",
      },
      payWay:2,
      orderId:'',
      rules: {
        price: [{ required: true, message: "请输入充值金额", trigger: "blur" }],
      },
      money:1000,
      BZJmoney:'',
      flag:''
    };
  },
  created() {
  },
  methods: {
    // 打开弹窗
    open(money,BZJmoney,flag) {
      this.money = money
      this.BZJmoney = BZJmoney
      this.flag = ''
      if(flag){
        this.flag = flag
      }
      this.dialogVisible = true;
      this.payWay = 2
    },
    selectPayway(val){
      this.payWay = val
    },

    // 确认充值
    async submitForm() {
      moneyApi.addBzj({
        orderType:1,
        amount:this.money
      }).then(async (res) => {
        this.orderId = res.data.id
        await this.payNow(res.data.id)
        this.loading = false;
        
      });
    },
    // 轮询订单支付结果
    checkOrderInterval(){
      moneyApi
        .payBzjStateInterval({ id: this.orderId })
        .then((res) => {
          if (res.code == 200) {
            if (res.data.pay_status == 2) {
              this.$store.dispatch("getShopInfo")
              if(this.flag=='joinYouzhi'){
                this.$emit('next')
                this.$refs.payQrcode.close()
              }else{
                this.$refs.payQrcode.showSuccess('保证金','您已缴纳商家保证金，即可享受商家权益')
                this.$refs.payQrcode.close()
              }
              this.dialogVisible = false;
            }
          }
        });
    },
    // 查询订单状态
    checkOrder() {
      moneyApi
        .payBzjStateHander({
          id: this.orderId
        })
        .then((res) => {
          if (res.code == 200) {
            if (res.data.payStatus == 2) {
              this.$store.dispatch("getShopInfo")
              if(this.flag=='joinYouzhi'){
                this.$emit('next')
                this.$refs.payQrcode.close()
              }else{
                this.$refs.payQrcode.showSuccess('保证金','您已缴纳商家保证金，即可享受商家权益')
                this.$refs.payQrcode.close()
              }
              this.dialogVisible = false;
            }else{
              this.$message.waring('未查询到支付成功！如有问题请联系客服')
            }
          }
        });
    },
    // 请求支付参数
    async payNow(id){
      let obj = {
            id:id,
            payWay:this.payWay,
            payScene:3,
            qrPayMode:4,
            goodsTitle:'保证金缴纳'
          }
          const res1 = await payApi.userPayOrderRecordPayment(obj);
          //console.log(res1);
          if (res1.code === 200) {
            const isHuifu = res1.data.isHuifu||1
              this.$refs.payQrcode.open(this.payWay,res1.data.formStr,isHuifu )
          }
    },

    close() {
      this.reset();
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.form-box {
 
  padding: 10px 0;
  .sub-tit {
  }
  // .payway{
  //   width: 500px;
  // }
  .kuaijie {
    margin-top: 20px;
  }
  .kuaijie-item {
    width: 110px;
    height: 49px;
    border-radius: 4px;
    border: 1px solid $yellow;
    text-align: center;
    color: $yellow;
    padding-top: 4px;
    cursor: pointer;
    &.active {
      color: #fff;
      background-color: $yellow;
    }
  }
  .demo-ruleForm {
    margin-top: 20px;
  }
  .zfb {
    width: 42px;
    height: 42px;
  }
  .tip {
    color: rgba(0, 0, 0, 0.5);
    margin-top: -15px;
  }
  .center {
    text-align: center;
    margin-top: 20px;
    .el-button {
      width: 293px;
      height: 48px;
      font-size: 18px;
    }
  }
}
</style>
